<template>
	<view class="home">
		<page-content style="height: 100%;" ref="child" :refresher="refresher" @on-refresh="setData" @update="setData"
			@onRefresh="onRefresh" @scrolltolower="fenye" class="page-content">
			<view class="" style="height: 200rpx;background-color: #7484f7;padding-top: 20rpx;">
				<view class="bar" @click="goClass()">
					<u-image src="/static/home/change_btn.png" width="46rpx" height="46rpx" :lazy-load="true">
						<u-loading slot="loading"></u-loading>
					</u-image>
					<view class="ml50 colorfff">
						{{bjmc!=null?bjmc:'暂无班级'}}
					</view>
				</view>
			</view>
			<view class="banner">
				<view class="task-list box box-pack-between">
					<view class="items box box-tb box-align-center box-pack-center" @click="goKc()">
						<view class="">
							<u-image
								src="https://yh-sys.oss-cn-beijing.aliyuncs.com/86104D7C62C34302B5EFE63C73C85877icon_kc.png?Expires=4799124292&OSSAccessKeyId=LTAI4GL8SwAiLh3sSPXDS7z9&Signature=Xm9SoI0qKUjWm9ThnoTeKyXxKq4%3D"
								width="120rpx" height="120rpx">
								<u-loading slot="loading"></u-loading>
							</u-image>
						</view>
						<view class="title">
							课程任务
						</view>
					</view>
					<view class="items box box-tb box-align-center box-pack-center" @click="goSj()">
						<view class="posr">
							<u-image
								src="https://yh-sys.oss-cn-beijing.aliyuncs.com/19346DB96828447E8E98B8C1503A6ACEicon_sj.png?Expires=4799124039&OSSAccessKeyId=LTAI4GL8SwAiLh3sSPXDS7z9&Signature=p58CuMurcrl8ezegUmj4HravE1k%3D"
								width="120rpx" height="120rpx">
								<u-loading slot="loading"></u-loading>
							</u-image>
							<view class="tips" v-if="wpyNum != 0">
								未批阅 +{{wpyNum}}
							</view>
						</view>
						<view class="title">
							实践任务
						</view>
					</view>
				</view>
				<u-gap height="2" bg-color="#F0F1F8"></u-gap>
				<view class="group box box-align-center box-pack-between" @click="goScoreGroup()">
					<view class="box box-align-center">
						<u-image src="@/static/home/icon_group.png" width="38rpx" height="36rpx">
							<u-loading slot="loading"></u-loading>
						</u-image>
						<view class="ml20">
							评分小组
						</view>
					</view>
					<u-icon name="arrow-right"></u-icon>
				</view>
			</view>
			<view class="class-info">
				<view style="width:300px;">
					<u-tabs ref="tabs" :list="tablist" :current="current" @change="change" count="cate_count"
						:name="name" :offset='hj'></u-tabs>
				</view>
				<view v-if="current==0">
					<view class="class-content mt20" v-if="bList.length !=0">
						<chart-view v-for="(item,index) in bList" :key="item.id" :imgList="item.imgList"
							:avatar="item.icon" :name="item.name" :publishTime="item.createTime" :content="item.content"
							:isLike="item.isLike" :isGiveReward="item.isGiveReward" :likeNumber="item.likeNumber"
							:item="item" :giveRewardNumber="item.giveRewardNumber" :chatNumber="item.plNum"
							:sourceShow="sourceShow" :sourceTitle="item.sourceTitle" :sourceImg="item.sourceImg"
							:sourceAuthor="item.sourceAuthor" :isLikeCnt="item.isLikeCnt"
							@clickDynamic="clickDynamic(index)" @clickUser="clickUser(item.id)"
							@clickDelete="clickDelete()" @clickThumbsup="clickThumbsup(item.id)" @bjqlist="bjqlist()"
							@clickGiveReward="clickGiveReward(item.id)" @clickChat="clickChat()"
							@clickSource="clickSource(id)" @clearBjq="clearBjq()" @clickFx="clickFx(item)">
						</chart-view>
						<u-loadmore :status="status" @loadmore="fenye()" />
					</view>
					<no-data class="nodata" title="暂无劳动风采" v-else></no-data>
				</view>
				<!-- 待办组件引入位置-->
				<view v-if="current==1">
					<view class="class-content mt20" v-if="listj.length!=0">
						<ali-reg ref="aliReg" @clickbo="clickbo($event)" @clickadop="clickadop($event)"
							v-for="(jtem,i) in listj" :key="i" :jtem="jtem"></ali-reg>
						<u-loadmore :status="regstatus" @loadmore="regfenye()" />
					</view>
					<no-data title="暂无记录" v-else class="nodata"></no-data>
				</view>
			</view>
		</page-content>
		<!-- 评论 -->
		<u-popup v-model="pLshow" mode="bottom" height="70%" @close="close">
			<view class="chart-cont">
				<view class="chart-top">
					<view class="chart-cnt">
						{{plNum}}条评论
					</view>
					<u-icon name="close" @click="close"></u-icon>
				</view>
				<view class="chart-bottom">
					<view class="" v-for="(item,im) in pinglunlist" :key="im">
						<view class="user__container" :style="'display: '+userDisplay+';'">
							<view class="user__header-warp">
								<view class="user__header" @click.stop="clickUser()">
									<image class="user__header-image" :src="item.icon" mode="aspectFill"></image>
								</view>
							</view>
							<view class="user__content">
								<view class="user__content-main">
									<text class="user__content-title uni-ellipsis"
										@click.stop="clickUser()">{{item.name }}</text>
									<text class="user__content-note uni-ellipsis">{{item.pubTime}}</text>
								</view>
							</view>
						</view>
						<view class="texts">{{item.content}}</view>
					</view>
				</view>
				<view class="chart-input" :style="'bottom:'+KeyboardHeight+'px;'">
					<textarea v-model="chartText" placeholder="留下你的精彩评论吧" :adjust-position="true"
						@focus="textareaFocus()" />
					<view @click="clickSend()" class="send-btn">发送</view>
				</view>
			</view>
		</u-popup>
		<!--待办驳回原因和审核人-->
		<u-popup v-model="regshow" mode="center" @close="close">
			<view class="chart-cont">
				<view class="chart-top">
					<view class="chart-cnt">
						驳回原因
					</view>
					<u-icon name="close" @click="close"></u-icon>
				</view>
				<view class="chart-bot" :style="'bottom:'+KeyboardHeight+'px;'">
					<view class="chart-ipt">
						<textarea v-model="regtext" maxlength="100" required placeholder="请输入你的驳回信息"
							:adjust-position="true" @focus="textareaFocus()" @input="checktextarea" />
					</view>
					<button type="primary" @click="regSend(sendid)" class="send-bttn">确定</button>
				</view>
			</view>
		</u-popup>
		<!-- 分享 -->
		<u-popup v-model="fxShow" mode="bottom" height="300px" border-radius="24" @close="handleClose">
			<u-form :model="form" ref="uForm" :label-width="180" label-align="right">
				<u-form-item label="分享标题">
					<u-input v-model="fxTitle" />
				</u-form-item>
				<u-form-item label="分享图片">
					<u-upload :action="action" :file-list="fileList" :max-count="1" :multiple="false"
						:show-progress="false" @on-uploaded="onuploaded" ref="uUpload">
					</u-upload>
				</u-form-item>
			</u-form>

			<view class="box box-tb box-align-center fx">
				<view class="box box-align-center">
					<view class="mr10 ml10 box box-tb box-align-center" @click="handleShare()">
						<button open-type="share">
							<u-image width="45px" height="45px"
								src="https://yhykt.oss-cn-beijing.aliyuncs.com/E9B1158464424528B120E668941BC48Cafead635b3db8e9599d7445a2997769.png?Expires=4809034324&OSSAccessKeyId=LTAI4Fgsq7J3XQi7e2SRfzjJ&Signature=JNUIIK%2BU73Ee65XW1RniWCQsYX0%3D">
							</u-image>
							<view style="font-size: 14px;">分享到微信</view>
						</button>
					</view>
				</view>
			</view>

		</u-popup>
		<!-- 删除 -->
		<u-action-sheet :list="list" v-model="deleteShow" @click="comfirm()"></u-action-sheet>
		<u-toast ref="uToast" />
		<u-modal v-model="showdel" title="确认删除" content="确认删除本条班级动态？" @confirm="confirmdel" :show-cancel-button="true">
		</u-modal>
	</view>
</template>

<script>
	import chartView from './chartView.vue';
	import pageContent from '@/components/pageContent.vue';
	import aliReg from './trReg.vue'; //待办
	export default {
		components: {
			chartView,
			pageContent,
			aliReg
		},
		props: ['bjmc'],
		data() {
			return {
				action: this.$api.baseUrl + '/comm/uploadfile',
				style: {
					border: 'none',
					display: 'flex',
					flexDirection: 'column',
				},
				fxShow: false,
				fxImage: '',
				fxTitle: '',
				fileList: [],
				regtext: '',
				reglist: [],
				regshow: false,
				listj: [],
				hj: [2, 1],
				plNum: 0,
				pLshow: false,
				refresher: true,
				isRefreshing: false, // 是否在刷新中
				infiniteDisabled: false, // 是否禁用上拉加载
				triggered: true,
				user: uni.getStorageSync('user'),
				bj: '',
				wpyNum: 0,
				page: {
					total: 0,
					pageSize: 10,
					pageNum: 1,
					pages: 1,
					list: []
				},
				zcsq: {
					total: 0,
					pageSize: 5,
					pageNum: 1,
					pages: 1,
					list: []
				},
				bList: [],
				show: false,
				status: 'loadmore',
				regstatus: 'loadmore',
				pinglunlist: [],
				chartText: '',
				chartId: '',
				deleteShow: false,
				showdel: false,
				list: [{
					text: '删除'
				}],
				loading: false,
				tablist: [{
						name: '校园风采'
					},
					{
						name: '待办',
						cate_count: 0
					},
				],
				current: 0,
				sendid: ''
			}
		},
		onShareAppMessage(res) {
			return {
				title: this.fxTitle,
				path: '/pages/index/index',
				imageUrl: this.fxImage,
				success: res => {
					//console.log(res);
					// 转发成功
					uni.showToast({
						title: "分享成功",
						icon: 'success',
						duration: 2000
					})
				},
				fail: res => {
					//console.log(res);
					// 分享失败
				},
			}
		},
		mounted() {
			this.loading = true;
			this.getApplys();
		},
		methods: {
			clickFx(item) {
				uni.setStorageSync('chat_info', item);
				this.fileList = [];
				//console.log('>>>>>>>>>>1111', this.fileList)
				this.fxShow = true;
				if (item.conts.length != 0) {
					if (item.conts[0].fileSuffix == 'mp4') {
						this.fxImage = item.conts[0].firstFrame;
						// uni.setStorageSync('fxImage', item.conts[0].firstFrame)
					} else {
						this.fxImage = item.conts[0].url;
						// uni.setStorageSync('fxImage', item.conts[0].url)
					}
				} else {
					// uni.setStorageSync('fxImage',
					// 	'https://yhykt.oss-cn-beijing.aliyuncs.com/6B5EEFF0D4134B8F8D4DDCCBD49CF51C11111.png?Expires=4809066847&OSSAccessKeyId=LTAI4Fgsq7J3XQi7e2SRfzjJ&Signature=CWwAt7IZtgcT6uzYesjOvsFotPM%3D'
					// 	)
					this.fxImage =
						'https://yhykt.oss-cn-beijing.aliyuncs.com/6B5EEFF0D4134B8F8D4DDCCBD49CF51C11111.png?Expires=4809066847&OSSAccessKeyId=LTAI4Fgsq7J3XQi7e2SRfzjJ&Signature=CWwAt7IZtgcT6uzYesjOvsFotPM%3D'
				}
				//console.log(uni.getStorageSync('chat_info'));
				this.fxTitle = item.title
				//存储title 
				uni.setStorageSync('fxTitle', this.fxTitle)

				this.fileList.push({url: this.fxImage})
				//console.log('>>>>>', this.fileList);
			},
			handleShare() {
				uni.setStorageSync('fxTitle', this.fxTitle);
				uni.setStorageSync('fxImage', this.fxImage)
				let files = [];
				files = this.$refs.uUpload.lists;
				//console.log(files)
			},
			handleClose(){
				this.$refs.uUpload.clear();
				//console.log("123");
			},
			//上传图片
			onuploaded(lists, name) {
				this.fxImage = lists[0].response.url;
			},
			//通过事件
			clickadop(adopid) {
				let _this = this;
				wx.showModal({
					title: '审核',
					content: '请确认是否审核通过',
					confirmColor: '#1890FF',
					success(res) {
						if (res.confirm) {
							wx.showToast({
								title: '操作成功',
								icon: 'success',
							})
							//通过接口改变数据中的状态
							let params = {
								id: adopid,
								approvor: _this.user.name,
								approvoruserid: _this.user.id
							}
							_this.$api.post({
								url: '/ytodo/passtodo'
							}, params).then(res => {
								//console.log(res)
								_this.getApplys()
							})
						} else if (res.cancel) {
							wx.showToast({
								title: '取消操作',
								icon: 'error',
							})
						}
					}
				})
			},
			//打开驳回弹窗
			clickbo(boid) {
				this.regshow = true;
				this.sendid = boid;
			},
			//校检输入的驳回原因
			checktextarea() {
				// let reg=/^([\u4e00-\u9fa5_a-zA-Z0-9_]{3,100})$/;
				if (this.regtext == '') {
					this.$refs.uToast.show({
						title: '字数限制0~100之内且不为空',
						type: 'default'
					})
				}
			},
			//发送驳回原因和审核人姓名给注册人
			//获取子组件中的id
			regSend(sendid) {
				let _this = this;
				if (_this.regtext != '') {
					_this.regshow = false;
					let params = {
						id: sendid,
						reason: _this.regtext,
						approvor: _this.user.name,
						approvoruserid: _this.user.id
					}
					//驳回接口改变数据中的状态	
					this.$api.post({
						url: '/ytodo/reject'
					}, params).then(res => {
						this.getApplys();
						_this.regtext = ''
					})
					//调用数据，刷新里面未读的数量
				} else {
					this.$refs.uToast.show({
						title: '字数限制0~100之内且不为空',
						type: 'default'
					})
				}
			},
			//tab页的id
			change(index) {
				this.current = index;
			},
			onRefresh(e) {
				this.$refs.child.refresherComplete()
			},
			setData() {
				this.bj = uni.getStorageSync('clazz')
				this.getWwcNum()
				this.bjqlist()
				this.getApplys()
			},
			fenye() {
				if (this.page.pages >= this.page.pageNum) {
					this.status = 'loading';
					this.page.pageSize = this.page.pageSize + 10;
					this.bjqlist()
					this.regfenye()
				}
			},
			regfenye() {
				if (this.zcsq.pages >= this.zcsq.pageNum) {
					this.regstatus = 'loading';
					this.zcsq.pageSize = this.zcsq.pageSize + 5;
					this.getApplys();
				}
			},
			getWwcNum() {
				let opts = {
					url: '/yclassldsjtaskrecords/getWpyNum',
					method: 'post'
				};
				let params = {
					classid: this.bj.id
				};
				this.$api.post(opts, params).then(res => {
					this.wpyNum = res.data;
				})
			},
			bjqlist() {
				//console.log(">>bjqlist")
				// if(pageNum == undefined){
				// 	pageNum = 1;
				// }
				let params = {
					userid: this.user.id,
					classid: this.bj.id,
					pageNum: this.page.pageNum,
					pageSize: this.page.pageSize
				};
				//console.log(params)
				this.$api.post({
					url: '/ybjq/bjqList',
					method: 'post'
				}, params).then(res => {
					this.isRefreshing = false
					this.$refs.child.refresherComplete()
					uni.stopPullDownRefresh();
					this.bList = res.list.list;
					this.page = {
						pageNum: res.list.pageNum,
						pageSize: res.list.pageSize,
						total: res.list.total,
						pages: res.list.pages
					}
					this.status = 'loadmore'
					if (this.page.pageNum >= this.page.pages) {
						this.status = 'nomore'
						this.page.pageSize = 10
					}
				}).catch(error => {
					this.isRefreshing = false
					this.$refs.child.refresherComplete()
				})
			},
			clearBjq() {
				this.page = {};
				this.bList = [];
				this.bjqlist();
			},
			getApplys() {
				let params = {
					userid: this.user.id,
					pageNum: this.zcsq.pageNum,
					pageSize: this.zcsq.pageSize,
				}
				//数据接口
				this.$api.post({
					url: '/ytodo/pagelist'
				}, params).then(res => {
					//console.log(res)
					if (res.code == 0) {
						this.loading = false;
						this.isRefreshing = false
						this.$refs.child.refresherComplete();
						uni.stopPullDownRefresh();
						this.listj = res.page.list
						this.tablist[1].cate_count = res.page.total
						//console.log(res)
						this.zcsq = {
							pageNum: res.page.pageNum,
							pageSize: res.page.pageSize,
							total: res.page.total,
							pages: res.page.pages
						}
					}
					this.regstatus = 'loadmore';
					//console.log(this.zcsq)
					if (this.zcsq.pageNum == this.zcsq.pages) {
						this.regstatus = 'nomore'
					}

				}).catch(error => {
					this.isRefreshing = false
					this.$refs.child.refresherComplete()
				})
			},
			goKc() {
				wx.vibrateShort();
				//检查当前学校  当前学期是否发布教学计划
				this.$api.post({
					url: '/yteachplan/chkPlan'
				}, {
					schoolid: this.user.schoolId
				}).then(res => {
					//console.log(res)
					if (res.ispub == 'yes') {
						uni.navigateTo({
							url: '/pageHome/kcView'
						})
					} else {
						this.$refs.uToast.show({
							title: '未发布课程计划！\r\n请耐心等待~',
							type: 'warning',
							duration: '3000'
						})
					}
				})
			},
			goSj() {
				wx.vibrateShort();
				//检查当前学校  当前学期是否发布教学计划
				this.$api.post({
					url: '/yteachplan/chkPlan'
				}, {
					schoolid: this.user.schoolId
				}).then(res => {
					if (res.ispub == 'yes') {
						uni.navigateTo({
							url: '/pageHome/sjView'
						})
					} else {
						this.$refs.uToast.show({
							title: '未发布实践计划！\r\n请耐心等待~',
							type: 'warning',
							duration: '3000'
						})
					}
				})
			},
			goScoreGroup() {
				wx.vibrateShort();
				uni.navigateTo({
					url: '/pageHome/scoreGroup'
				})
			},
			clickDynamic(e) {},
			// 点击用户信息
			clickUser(e) {},
			// 点击删除
			clickDelete(e) {
				this.chartId = e
				this.deleteShow = true
			},
			// 点赞
			clickThumbsup(e) {},
			// 点击打赏
			clickGiveReward(e) {},
			// 点击聊天
			clickChat(e) {
				this.pLshow = true
				this.chartId = e
				//console.log(`>>>${e}`);
				this.$api.post({
					url: '/ybjqpl/pagelist',
					method: 'post'
				}, {
					bjqid: this.chartId
				}).then(res => {
					if (res.code == 0) {
						this.pinglunlist = res.list.list;
						this.plNum = res.list.total
					}
				})
			},
			// 点击原连接
			clickSource(e) {},
			//切换班级
			goClass() {
				wx.vibrateShort();
				uni.navigateTo({
					url: "/pageHome/changeClass"
				})
			},
			close() {
				this.pLshow = false
				this.bjqlist()
			},
			textareaFocus() {
				wx.onKeyboardHeightChange(res => {
					// //console.log(res);
					uni.showToast({
						title: res
					})
					this.KeyboardHeight = res.height
				})
			},
			clickSend() {
				//console.log(`>>>>${this.chartId}`);
				this.$api.post({
					url: '/comm/chkWords',
					method: 'post'
				}, {
					cont: this.chartText
				}).then(res => {
					if (res.risky == true) {
						this.$refs.uTips.show({
							title: '检测到违规内容，请重新编辑！',
							type: 'warning',
							duration: '2500'
						});
						this.chartText = "";
					}
					if (this.chartText != '') {
						this.$api.post({
							url: '/ybjqpl/add',
							method: 'post'
						}, {
							cont: this.chartText,
							bjqId: this.chartId,
							createUser: this.user.id
						}).then(res => {
							if (res.code == 0) {
								this.clickChat(this.chartId)
							}
						})
					} else {
						this.$refs.uToast.show({
							title: '评论不能为空',
							type: 'info'
						})
					}
				})

			},
			comfirm(index) {
				this.showdel = true;
			},
			confirmdel() {
				//console.log(this.chartId);
				this.$api.post({
					url: '/ybjq/delBjq',
					method: 'post'
				}, {
					id: this.chartId
				}).then(res => {
					if (res.code == "0") {
						this.$refs.uToast.show({
							title: '已删除',
							type: 'success',
							duration: '1500'
						});
						this.bjqlist()
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.home {
		position: relative;
		// margin-top: -188rpx;
		width: 100%;
		height: 100%;


		.banner {
			box-sizing: border-box;
			z-index: 100000;
			padding: 40rpx;
			margin: -126rpx auto 30rpx;
			width: 690rpx;
			height: 412rpx;
			border-radius: 20rpx;
			// background-color: rgba(255,255,255,.6);
			background: url(https://yh-sys.oss-cn-beijing.aliyuncs.com/091112224FF3469FA55C6A5496B1F69Aicon_banner%402x.png?Expires=4799124736&OSSAccessKeyId=LTAI4GL8SwAiLh3sSPXDS7z9&Signature=nW6OkqwzxRY0BItOkIfTLwzCs%2Bg%3D) no-repeat;
			background-size: 100% 100%;

			.task-list {
				margin-bottom: 30rpx;
				height: 247rpx;

				.items {
					flex: 1;

					.press {
						width: 85%;
					}

					.sliders {
						width: 65%;
					}

					.title {
						margin: 20rpx 0;
						font-size: 30rpx;
						color: #2F3142;
						font-weight: 500;
					}

					.posr {
						position: relative;

						.tips {
							position: absolute;
							top: 0;
							right: -110rpx;
							width: 140rpx;
							height: 40rpx;
							line-height: 40rpx;
							background: #FF5A77;
							border-radius: 26rpx;
							font-size: 20rpx;
							text-align: center;
							color: #fff;
						}
					}
				}
			}

			.group {
				height: 89rpx;
			}

		}

		.class-info {
			width: 100%;
			background-color: #fff;
			padding: 30rpx;
			min-height: calc(100% - 520rpx);
			height: auto;

			.tab {
				text-align: center;
				width: 130rpx;
				height: 40rpx;
				font-weight: 600;

				// border-bottom: 4rpx solid #7C79F5;
				// border-bottom-width: 5rpx;
				&:after {
					content: '';
					width: auto;
					width: 35rpx;
					height: 6rpx;
					background: #7C79F5;
					border-radius: 4px;
					display: block;
					margin: 0 auto;
					margin-top: 6rpx;
					z-index: 111111;
				}
			}
		}

	}

	.bar {
		display: flex;
		align-items: center;
		padding-left: 50rpx;
	}

	.ml50 {
		margin-left: 20rpx;
	}


	.chart-cont {
		position: relative;
	}

	.chart-top {
		// position: fixed;
		width: 100%;
		height: 100rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
		background-color: #fff;
		// z-index: 100;
		/* border-bottom: 2rpx solid #C0C0C0; */
	}

	u-icon {
		margin-right: 20rpx;
	}

	.chart-cnt {
		width: 610rpx;
		text-align: center;
	}

	.chart-bottom {
		padding: 100rpx 0 120rpx;
	}

	.chart-input {
		width: 100%;
		height: 120rpx;
		position: fixed;
		bottom: 0;
		background-color: #fff;
		display: flex;
		justify-content: space-around;
		align-items: center;
		border-top: 2rpx solid #C0C0C0;
	}

	.chart-input textarea {
		box-sizing: border-box;
		padding: 43rpx 0 0 20rpx;
		width: 560rpx;
		height: 100%;
	}

	.send-btn {
		width: 100rpx;
		height: 120upx;
		line-height: 120upx;
		margin-left: 16upx;
	}

	.chart-bot {
		position: relative;
		margin: 0 auto;
		width: 560rpx;
		height: 300rpx;
	}

	.chart-ipt {
		width: 560rpx;
		height: 200rpx;

	}

	.chart-ipt textarea {
		width: 560rpx;
		height: 100%;
		box-sizing: border-box;
	}

	.send-bttn {
		font-size: 20rpx;
		position: absolute;
		width: 100rpx;
		height: 73upx;
		line-height: 73upx;
		margin: 16upx;
		right: 0;
		bottom: 0;
	}

	.user__container {
		display: flex;
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		/* -webkit-flex-direction: row; */
		flex-direction: row;
		-webkit-box-flex: 1;
		/* -webkit-flex: 1; */
		flex: 1;
		padding: 14upx 18upx;
		position: relative;
		overflow: hidden;
	}

	.user__header {
		display: flex;
		width: 80upx;
		height: 80upx;
		-webkit-border-radius: 80upx;
		border-color: #eee;
		border-width: 1upx;
		border-style: solid;
		overflow: hidden;
		border-radius: 80upx;
	}

	.user__header-image {
		display: flex;
		align-content: center;
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		flex-direction: row;
		-webkit-box-pack: center;
		justify-content: center;
		-webkit-box-align: center;
		align-items: center;
		flex-wrap: wrap-reverse;
		width: 80upx;
		height: 80upx;
		border-radius: 80upx;
		border-color: #eee;
		border-width: 1upx;
		border-style: solid;
		overflow: hidden;
	}

	.user__content {
		display: flex;
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		flex-direction: row;
		-webkit-box-flex: 1;
		flex: 1;
		overflow: hidden;
		padding: 4upx 0;
	}

	.user__content-main {
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-webkit-flex-direction: column;
		flex-direction: column;
		-webkit-box-pack: justify;
		-webkit-justify-content: space-between;
		justify-content: space-between;
		padding-left: 14upx;
		-webkit-box-flex: 1;
		-webkit-flex: 1;
		flex: 1;
		overflow: hidden;
	}

	.user__content-note {
		margin-top: 3px;
		color: #999;
		font-size: 24upx;
		font-weight: normal;
		overflow: hidden;
	}

	.texts {
		padding-left: 11%;
		margin: 1% 3% 2%;
	}

	.fx button {
		display: flex;
		flex-direction: column;
		align-items: center;
		background-color: #fff;
	}

	/deep/ .fx button::after {
		border: none;
	}
</style>
